import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import img1 from '../../images/canvas.png';
import obj1 from '../../images/file.obj'
import axios from 'axios';

export default function PageComponent() {
    const boxRef = useRef(null);

    // 场景
    const scene = new THREE.Scene();
    //摄像机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 2400);
    //渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    //render.setSize(width,height);设置为盒子的宽高，调几次到合适的大小，因为宽高的比例影像模型的比例
    renderer.setSize(900, 450);
    renderer.setClearColor(0xF0F1F5, 1);
    //像素比率：设置为设备像素比
    renderer.setPixelRatio(window.devicePixelRatio);

    //建造三维坐标系
    // const axes = new THREE.AxesHelper(100);
    // scene.add(axes);

    //相机在场景中的位置
    camera.position.x = 1600;
    camera.position.y = 0;
    camera.position.z = 0;
    //设置相机正对场景中心
    camera.lookAt(scene.position);
    scene.add(camera);

    //场景光源
    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    scene.add(ambientLight);

    //点光源
    const pointLight = new THREE.PointLight(0xffffff, 0.8);
    camera.add(pointLight);

    //控制器：实现以目标为焦点的旋转缩放
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', animate);

    //设置贴图的纹理为目标图片
    const texture = new THREE.Texture();
    const imageLoader = new THREE.ImageLoader();
    imageLoader.load('http://192.168.72.166:8080/mtl.png', (img) => {
        texture.image = img;
        texture.needsUpdate = true;
    })
    // imageLoader.load(img1,(img)=>{
    //     texture.image = img;
    //     texture.needsUpdate = true;
    // })

    // const texture = new THREE.CanvasTexture('canvas');

    //添加obj模型，mtl贴图，并确定模型的位置。
    // const objLoader = new OBJLoader();
    // const mtlLoader = new MTLLoader();
    // mtlLoader.load(mtl1,(materials)=>{
    //     materials.preload();
    //     objLoader.setMaterials(materials);
    //     objLoader.load(obj1,(obj)=>{
    //         obj.position.y = 0.1;
    //         obj.position.z = -0.4;
    //         obj.position.x = 0.1;
    //         scene.add( obj );
    //         animate();
    //     })
    // })

    //添加obj模型，将obj的每一面贴自定义的图，并确定模型的位置。
    const objLoader = new OBJLoader();
    objLoader.load(obj1, (obj) => {
        obj.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
                child.material.map = texture;
            }
        });
        obj.position.y = 0;
        obj.position.z = 0;
        obj.position.x = 0;
        scene.add(obj);
        animate();
    })

    //将渲染操作封装
    function animate() {
        // 执行渲染操作-指定场景、相机作为参数
        renderer.render(scene, camera);
    }

    animate();

    window.addEventListener('resize', onWindowResize, false);

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    //将渲染器渲染到页面上。
    useEffect(() => {
        boxRef.current?.appendChild(renderer.domElement);
        return () => {
            boxRef.current?.removeChild(renderer.domElement);
        };
    }, [boxRef, renderer]);

    return <div>
        <div ref={boxRef}></div>
    </div>

}